<template>
  <view class="container">
    <form class="container_form">
      <view class="container_form_row">
        <view class="container_form_row_label">名称</view>
        <view class="container_form_row_value"
          ><input
            placeholder="请输入"
            name="productName"
            v-model="formInfo.productName"
            @input="onInput"
            :disabled="disabled"
        /></view>
      </view>
      <view class="container_form_row">
        <view class="container_form_row_left">
          <view class="container_form_row_label">螺口</view>
          <view class="container_form_row_value"
            ><input
              placeholder="请输入"
              name="screwMouth"
              v-model="formInfo.screwMouth"
              @input="onInput"
              type="number"
              :disabled="disabled"
          /></view>
        </view>
        <view class="container_form_row_line">|</view>
        <view class="container_form_row_right">
          <view class="container_form_row_label">克重</view>
          <view class="container_form_row_value"
            ><input
              placeholder="请输入"
              name="grammage"
              v-model="formInfo.grammage"
              @input="onInput"
              type="number"
              :disabled="disabled"
          /></view>
        </view>
      </view>
      <view class="container_form_row">
        <view class="container_form_row_label">规格型号</view>
        <view class="container_form_row_value"
          ><input
            placeholder="请输入"
            name="model"
            v-model="formInfo.model"
            @input="onInput"
            :disabled="disabled"
        /></view>
      </view>
      <view class="container_form_row">
        <view class="container_form_row_label">单价</view>
        <view class="container_form_row_value"
          ><input
            placeholder="请输入"
            name="saleTaxPrice"
            v-model="formInfo.saleTaxPrice"
            @input="onInput"
            :disabled="disabled"
            type="digit"
        /></view>
      </view>
      <view class="container_form_row">
        <view class="container_form_row_label">数量</view>
        <view class="container_form_row_value"
          ><input
            placeholder="请输入"
            name="count"
            v-model="formInfo.count"
            @input="onInput"
            type="number"
        /></view>
      </view>
      <view class="container_form_row">
        <view class="container_form_row_label">金额</view>
        <view v-if="!disabled" class="container_form_row_value">{{
          totalPrice
        }}</view>
        <view v-else class="container_form_row_value">{{ totalPrices }}</view>
      </view>
      <view class="container_form_upload">
        <view @click="chooseImage"> 上传图片 </view>
        <view>
          <uploadImg
            :disabled="disabled"
            @uploadFileRes="getUploadFileRes($event, 'afterImage')"
            :ImgUrl="formInfo.designImage"
            :pageCheck="true"
          >
          </uploadImg>
          <!-- <upload-pic
            placeholder="添加/拍照"
            @remove="onRemove"
            @upload="upload"
            :fileList="photoList"
            :multiple="false"
            :limit="1"
          ></upload-pic> -->
        </view>
      </view>
    </form>
  </view>
</template>

<script>
import uploadImg from "@/components/uploadImg/index.vue";
export default {
  components: {
    uploadImg,
  },
  data() {
    return {
      //   formInfo: {
      //     productName: "",
      //     grammage: "", //克重
      //     screwMouth: "", //螺口
      //     count: "", //数量
      //     saleTaxPrice: "", //单价
      //     designImage: "",
      //     detailRemark: "",
      //     index: 0,
      //     model: "", //规格
      //   },
      photoList: [],
      totalPrice: 0,
    };
  },
  computed: {
    totalPrices() {
      console.log(
        this.formInfo.saleTaxPrice * this.formInfo.count,
        this.totalPrice
      );
      if (
        this.$props.formInfo.saleTaxPrice == null ||
        this.$props.formInfo.count == null
      ) {
        return 0;
      }

      if (this.totalPrice === 0) {
        return this.$props.formInfo.saleTaxPrice * this.$props.formInfo.count;
      }

      return this.totalPrice;
    },
  },
  watch: {
    formInfo: {
      immediate: true,
      handler(val) {
        console.log("val", val);
      },
    },
  },
  props: {
    formInfo: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  //   watch: {
  //     formInfo: {
  //       handler(newV, old) {
  // 		console.log('new')
  //         if (this.formInfo.count) {
  //           this.formInfo.model = val * this.formInfo.count;
  //         }
  //       },
  // 	  deep:true
  //     },
  //   },

  methods: {
    //处理图片数组的逗号
    handleComma(data) {
      if (data) {
        if (data instanceof Array) {
          data = data + "";
        }
        let urlArr = data.split(",");
        for (var i = 0; i < urlArr.length; i++) {
          if (urlArr[i] == "") {
            urlArr.splice(i, 1);
            i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
            // 这样才能真正去掉空元素,觉得这句可以删掉的连续为空试试，然后思考其中逻辑
          }
        }
        return urlArr.toString();
      }
    },
    getUploadFileRes(e, i) {
      console.log("e" + e[0]);
      if (i == "afterImage") {
        this.$emit("uploadChange", {
          url: e[0],
          index: this.index,
        });
        // this.formInfo.designImage = e[0];
        // this.$set(this.formInfo, "designImage", e[0]);
      }
    },
    handleImg(originImg) {
      console.log("originImg", originImg);
      if (originImg) {
        let img = originImg + "";
        let arr = img.split("");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == "\\") {
            arr[i] = "/";
          }
        }
        let imgs = arr.join("");
        return imgs;
      }
    },
    onInput(e) {
      if (this.formInfo.saleTaxPrice === "" || this.formInfo.count === "") {
        this.totalPrice = 0;
        return;
      }
      if (this.formInfo.count && this.formInfo.saleTaxPrice) {
        this.totalPrice = this.formInfo.saleTaxPrice * this.formInfo.count;
      }
      console.log("input formInfo", this.formInfo);
      this.$emit("inputChange", {
        data: this.formInfo,
        index: this.index,
      });
      this.$emit("update:formInfo", this.formInfo);
    },

    chooseImage() {
      if (this.disabled) {
        return;
      }
      console.log("chooseImage");
      uni.chooseImage({
        count: 9,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success(res) {
          console.log(res.tempFilePaths);
        },
        fail(err) {
          console.log("errr" + JSON.stringify(err));
        },
        complete(res) {
          console.log("res" + JSON.stringify(res));
        },
      });
      //   uni.getSetting({
      //     success(res) {
      //       if (!res.authSetting["scope.writePhotosAlbum"]) {
      //         uni.authorize({
      //           scope: "scope.writePhotosAlbum",
      //           success() {
      //             // 用户已经同意过授权，可以直接调用 chooseImage
      //             uni.chooseImage({
      //               count: 9,
      //               sizeType: ["original", "compressed"],
      //               sourceType: ["album", "camera"],
      //               success(res) {
      //                 console.log(res.tempFilePaths);
      //               },
      //             });
      //           },
      //           fail() {
      //             // 用户未授权，可以在界面提示用户或引导至设置页面
      // 			uni.showModal({
      //             title: '授权提示',
      //             content: '需要获取您的相机权限，请到设置中开启',
      //             showCancel: false,
      //             confirmText: '去设置',
      //             success: function(res) {
      //                 if (res.confirm) {
      //                     console.log('去设置');
      //                     // 引导用户到设置页面开启权限
      //                     // 这里可以使用 uni.openSetting 打开设置页面
      //                     uni.openSetting({
      //                         success: (res) => {
      //                             console.log(res.authSetting)
      //                         }
      //                     })
      //                 }
      //             }
      //         })
      //           },
      //         });
      //       } else {
      //         // 用户已授权，直接调用 chooseImage
      //         uni.chooseImage({
      //           count: 9,
      //           sizeType: ["original", "compressed"],
      //           sourceType: ["album", "camera"],
      //           success(res) {
      //             console.log(res.tempFilePaths);
      //           },
      //         });
      //       }
      //     },
      //   });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: white;
  border-radius: 20rpx;
  padding: 20rpx;
margin-top: 20rpx;
  &_form {
    &_row {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #f1f1f1;
      padding: 20rpx 0;

      &_label {
      }

      &_value {
        text-align: right;
        flex: 1;
      }

      &_left {
        display: flex;
      }

      &_right {
        display: flex;
      }

      &_line {
        margin: 0 20rpx;
      }
    }

    &_upload {
      padding: 20rpx 0;
    }
  }
}
</style>
